$(function(){
    var oBox = $("#box");
    var oBtnList = $("#btn-list");
    var aBtnListA = $("#btn-list a");
    var oImageList = $("#image-list");
    var aImageListLi = $("#image-list li");
    var iLiWidth	= aImageListLi.width();
    var oLeftBtn =$("#left-btn");
    var oRightBtn =$("#right-btn");
    var iIndex = 1;
    var flag = true;

    var oHov1 = $(".hov1");
    var oHov2 = $(".hov2");
    var oHov3 = $(".hov3");
    var oModel1 =$(".model1");
    var oModel2 =$(".model2");
    var oModel3 =$(".model3");
    var oOne = $(".one");
    var oTwo = $(".two");
    var oThree = $(".three");
    var aLeftMenuLi = $("#left-menu li");
    var oCon = $("#menu-content .con");

    var oDaoH = $("#daoh");
    var oSubNav = $("#subnav");

    var aEcImg = $("#ec img");


    var aCanvasLi = $(".canvas li")
    var aCanvP =  $(".canv p");

    var oNav = $("#nav");

    //吸顶效果
    $(window).scroll(function(){
        console.log($(window).scrollTop());
        if($(window).scrollTop()>40){
            oNav.css({position:"fixed",top:0,background:"rgba(255, 255, 255, 0.95)"});
        }
        if($(window).scrollTop()<40){
            oNav.css({position:"relative",background:"rgba(255, 255, 255, 1)"});
        }
    });

    //划过网站导航出来
    oDaoH.mouseenter(function(){
        oSubNav.css({display:"block",height:0}).animate({height:"208px"},600);
    });
    oDaoH.mouseleave(function(){
        oSubNav.animate({height:"0px"},600,function(){
            $(this).css({display:"none"});
        });
    });
    //划过购物车出来
    var oCart = $(".cart");
    var oCartDiv = $(".cart div")
    oCart.mouseenter(function(){
        oCartDiv.css({display:"block"}).animate({height:87+"px"},600);
    });
    oCart.mouseleave(function(){
        oCartDiv.animate({height:"0px"},600,function(){
            oCartDiv.css({display:"none"});
        })
    });


    //划过电商，对应隐藏的东西出来
    oHov1.mouseenter(function(){
        a(oModel1);
    });
    oOne.mouseleave(function(){
        b(oModel1);
    });

    oHov2.mouseenter(function(){
        a(oModel2);
    });
    oTwo.mouseleave(function(){
        b(oModel2);
    });
    oHov3.mouseenter(function(){
            a(oModel3)
    });
    oThree.mouseleave(function(){
        b(oModel3)
    });
    function a(obj){
        obj.css({display:"block",height:0}).animate({height:"230px"},600);
    }
    function b(obj){
        obj.animate({height:"0px"},600,function(){
            $(this).css({display:"none"});
        });
    }
   /* oHov.mouseenter(function(){
        oModel.css({display:"block",height:0}).animate({height:"230px"},600);
    });*/

//划过左侧侧单栏出没

    aLeftMenuLi.mouseenter(function(){
        var iIndex1 = $(this).index();
        //console.log($(this));
        oCon.css({display:"none"}).eq(iIndex1).css({display:"block"});
    });
    oCon.mouseleave(function(){
        oCon.css({display:"none"});
    });

    //划过btn，滚动
    aBtnListA.mouseenter(function(){
        iIndex = $(this).index() + 1;
        //console.log(iIndex);
        aBtnListA.removeClass("active").eq(iIndex-1).addClass("active");
        oImageList.animate({left:-iIndex*iLiWidth + "px"});
    });

    //
    oBox.mouseenter(function(){
        clearInterval(iTimer);
    });
    oBox.mouseleave(function(){
        iTimer = setInterval(function(){
            iIndex++;
            oImageList.animate({left:-iIndex*iLiWidth + "px"},function(){
                if(iIndex===1){
                    oImageList.css({left:-iLiWidth +"px"});
                }
            });
            if(iIndex===aBtnListA.length+1){
                iIndex = 1;
            }
            aBtnListA.removeClass("active").eq(iIndex-1).addClass("active");
        },3000)
    });

    //自动滚动
    var iTimer = setInterval(function(){
        iIndex++;
        oImageList.animate({left:-iIndex*iLiWidth + "px"},function(){
            if(iIndex===1){
                oImageList.css({left:-iLiWidth +"px"});
            }
        });
        if(iIndex===aBtnListA.length+1){
            iIndex = 1;
        }
        aBtnListA.removeClass("active").eq(iIndex-1).addClass("active");
    },3000)
    //给left加onclick事件
    oLeftBtn.click(function(){
        if(flag){
            flag = false;
            iIndex--;
            oImageList.animate({left:-iIndex*iLiWidth + "px"},function(){
                flag = true;
                if(iIndex===aImageListLi.length-2){
                    oImageList.css({left:-iIndex*iLiWidth +"px"});
                }
            });
            if(iIndex===0){
                iIndex = aImageListLi.length-2;
            }
            aBtnListA.removeClass("active").eq(iIndex-1).addClass("active");

        }
    });
    //给right加事件
    oRightBtn.click(function(){
        if(flag){
            flag = false;
            iIndex++;
            oImageList.animate({left:-iIndex*iLiWidth + "px"},function(){
                flag = true;
                if(iIndex===1){
                    oImageList.css({left:-iIndex*iLiWidth +"px"});
                }
            });
            if(iIndex===aImageListLi.length-1){
                iIndex = 1;
            }
            aBtnListA.removeClass("active").eq(iIndex-1).addClass("active");


        }
    });


    //console.log(aEcImg);
    //ec划过特效
    var iIndex2 = 0;
    aEcImg.mouseenter(function(){
        iIndex2 = $(aEcImg).index($(this));
        //console.log(iIndex1);
        aEcImg.stop().eq(iIndex2).animate({left:-10+"px"},200);
    });
    aEcImg.mouseleave(function(){
        aEcImg.animate({left:0+"px"},200);
    });

    //精品和电商划过特效  p出现
    var iIndex3 = 0;
    aCanvasLi.mouseenter(function(){
        iIndex3 = $(aCanvasLi).index($(this));
        console.log(iIndex3);
        aCanvP.eq(iIndex3).animate({height:20+"px"},300);
    });
    aCanvasLi.mouseleave(function(){
        aCanvP.stop().eq(iIndex3).animate({height:0+"px"},300);
    });


    //检测鼠标划过
    var oLi = $(".albody li");
    oLi.bind("mouseenter mouseleave",function(e) {
        var oMove = $(this).children('a');
        var w = $(this).width();
        var h = $(this).height();

        var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
        var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
        var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
        var eventType = e.type;
        if(e.type == 'mouseenter'){
            switch(direction) {
                case 0:
                    oMove.css({
                        left: 0,
                        top: -242
                    });
                    break;
                case 1:
                    oMove.css({
                        left: 242,
                        top: 0
                    });
                    break;
                case 2:
                    oMove.css({
                        left: 0,
                        top: 242
                    });
                    break;
                case 3:
                    oMove.css({
                        left: -242,
                        top: 0
                    });
                    break;
            }
            oMove.animate({
                left:0,
                top:0
            }, 150);
        }else{
            switch(direction) {
                case 0:
                    oMove.stop(true).animate({
                        left: 0,
                        top: -242
                    },150);
                    break;
                case 1:
                    oMove.stop(true).animate({
                        left: 242,
                        top: 0
                    }, 150);
                    break;
                case 2:
                    oMove.stop(true).animate({
                        left: 0,
                        top: 242
                    }, 150);
                    break;
                case 3:
                    oMove.stop(true).animate({
                        left: -242,
                        top: 0
                    },150);
                    break;
            }
        }
    });

});